<template>
	<view class="main">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="title">
			<uni-icons type="arrowleft" size="20" @click="getBack"></uni-icons>
			<view class="tit">
				<view>{{introduce.video.title}}</view>
			</view>
		</view>
		<scroll-view class="scroll" scroll-y="true"
			:style="{height: type===2?'calc(100vh - 105rpx)':'calc(100vh - 205rpx)'}">
			<!-- 视频组件 -->
			<Video :video="video"></Video>
			<!-- tab组件 -->
			<Tabs :tabTitle="tabTitle" @tabStatus="tabStatus"></Tabs>
			<!-- 课程目录 -->
			<view class="content" v-show="type === 1">
				<view class="list" v-for="item in introduce.chapters" :key="item.id">
					<view class="title_2">
						{{item.title}}
					</view>

					<view class="text_2" v-for="(value,index) in item.newarr" :key="value.id" @click="skipVideo(value)">
						<view :class="colorStyle === value.id? 'active':''">
							<text class="free" v-if="value.charge === 0">试看</text>
							{{value.title}}
						</view>
						<view class="time" :class="colorStyle === value.id? 'active':''">
							<!-- 截取空格后面所以的字符，保留前面的字符串 -->
							<!-- {{value.published_at.split(' ')[0]}} -->
						</view>
					</view>
				</view>

			</view>

			<view class="content" v-show="type === 2">
				视频介绍
			</view>
			<view class="content" v-show="type === 3">
				<!-- 评论组件 -->
				<Comment :videoList="videoList"></Comment>
			</view>
		</scroll-view>
		<!-- 	底部价格tab -->
		<CourseTab v-show="type === 1" :introduce="introduce" ></CourseTab>
		<!-- 底部评论的tan栏 -->
		<CommentTab v-show="type === 3" @commentContent="commentContent"></CommentTab>
		<tui-tips ref="myToast"  position="center"></tui-tips> 
	</view>
</template>

<script>
	import Video from '@/components/video'
	import Tabs from '@/components/tabs'
	import CourseTab from '@/components/courseTab'
	import Comment from '@/components/comment'
	import CommentTab from '@/components/commentTab'
	import {
		getVideoInfo,
		getVideoList,
		getVideo,
		getVideoRecord,
		getVideoComments,
		postVideoComments
	} from '@/request/api.js'
	export default {
		components: {
			Video,
			Tabs,
			CourseTab,
			Comment,
			CommentTab
		},
		async onLoad(optios) {
			const {
				videoId
			} = optios
			//存视频id
			this.videoId = videoId
			//获取视频列表
			// const videoList = await getVideoList()
			// console.log(videoList)
			//获取视频信息,要是videoId等于空值，就给默认值2
			const res = await getVideoInfo(videoId ? videoId : 2)
			this.introduce = res.data.data
			//进行数据改造
			const arr = []
			//遍历对象，把对象里面的数组逐个展开拿出来，形成一个新数组
			for (const key in this.introduce.videos) {
				arr.push(...this.introduce.videos[key])
			}
			// console.log(arr)
			//遍历新数组的id，只要他的id===标题的id，那标题创建一个数组，把新数组添加进去
			arr.map(v => {
				this.introduce.chapters.map(item => {
					if (item.id === v.chapter_id) {
						if (item.newarr === undefined) item.newarr = []
						item.newarr.push(v)
					}
				})
			})
			// console.log(this.introduce,111111111)

			//页面一进来就发送请求，获取当前点击的这个视频
			const video = await getVideo(videoId)
			const newVideo = video.data.data
			//要是newVideo没有数据的话，则需要购买此视频
			if (newVideo.length !== 0) {
				this.video.type = true
				this.video.url = newVideo.urls[0].url
			} else {
				this.video.type = false
				this.video.charge = this.introduce.video.charge
			}
			//改变选中的id样式
			this.colorStyle = Number(videoId)
			
			//页面一打开，就获取当前打开这条标题的评论
			this.VideoComments(videoId ? videoId : 2)

		},
		data() {
			return {
				videoList:{},
				videoId: null,
				introduce: {},
				type: 1,
				colorStyle: null,
				video: {
					url: '',
					type: null,
					charge: null
				},
				tabTitle: [{
						id: 1,
						name: "课程介绍",
						status: true
					},
					{
						id: 2,
						name: "视频介绍",
						status: false
					},
					{
						id: 3,
						name: "讨论区",
						status: false
					}
				]
			};
		},
		methods: {
			mytoast(text){
				const options = {
						msg: text,
						duration: 2000
					};
					 this.$refs.myToast.showTips(options); 
			},
			async commentContent(value){
				const res = await postVideoComments(this.videoId,{content:value})
				// console.log(res,'发布')
					 if(res.data.code === 0){
					 	this.mytoast('发布成功')
						console.log(this.videoId)
						 this.VideoComments(this.videoId)
					 }
					 if(res.data.code === 1){
					 	this.mytoast(res.data.message+'请充钱')
					 }
					console.log(res)
			
			},
			//点击获取视频
			async skipVideo(value) {
				//点击那个视频就存哪个视频id
				this.videoId = value.id
				// console.log(value)
				this.colorStyle = value.id
				const res = await getVideo(value.id)
				const video = res.data.data
				//判断有没有视频
				if (video.length !== 0) {
					this.video.type = true
					this.video.url = video.urls[0].url
					// 播放统计
					getVideoRecord(value.id, {
						duration: value.duration
					}).then(err => {
						console.log('播放完成')
					})
				} else {
					this.video.type = false
					this.video.charge = value.charge
				}

				this.VideoComments(value.id)

			},
			// 封装获取视频的评论的函数
			async VideoComments(id) {
				//根据视频id获取评论列表
				const res = await getVideoComments(id)
				this.videoList = res.data.data
				// console.log(res)
				//数据改造，把用户评论的数据添加到当前评论的这个用户下
				 const videoArr = []
				 for(const key in this.videoList.users){
				 	 videoArr.push(this.videoList.users[key])
				 }
				 // console.log(videoArr)
				 this.videoList.comments.map((v,i) =>{
				 	    videoArr.map(item =>{
							 if(item.id === v.user_id){
							 	  if(v.newVideoList === undefined) v.newVideoList = []
							 	  v.newVideoList.push(item)
							 }
						})
				 	  
				 })
				// console.log(this.videoList.comments)
				 // this.videoList.comments.map((v) =>{
					//  v.data = this.videoList.users[v.user_id]
				 // })
			
			},
			tabStatus(value) {
				this.tabTitle = value
				let id
				//拿到状态值为true的id
				this.tabTitle.forEach(v => {
					if (v.status) {
						id = v.id
					}
				})
				this.type = id
			},
			getBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		background-color: #f2f2f2;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
			background-color: #fff;
		}

		.title {
			height: 80rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.tit {
				width: 100%;
				display: flex;
				justify-content: center;

			}
		}

		.scroll {
			height: calc(100vh - 205rpx);
			overflow-y: auto;

			.pic {
				height: 480rpx;

				.img {
					width: 100%;
					background-size: cover;
				}
			}

			.content {
				margin-top: 20rpx;
				padding: 20rpx 40rpx;
				background-color: #FFFFFF;

				.pic {
					width: 500rpx;
					height: 500rpx;
					margin: 0 auto;
					padding-bottom: 90rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.list {

					.title_2 {
						margin: 10rpx 0;
						font-size: 28rpx;
						font-weight: 700;

					}

					.text_2 {
						display: flex;
						justify-content: space-between;
						margin: 60rpx 0;
						font-size: 28rpx;
						color: #666;

						.active {
							color: #239bf1;
						}

						.free {
							margin-right: 20rpx;
							padding: 5rpx 20rpx;
							background-color: #239bf1;
							border-radius: 30rpx;
							font-size: 22rpx;
							color: #fff;
						}
					}
				}
			}
		}


	}
</style>
